<template>
  <div class="contrainer">
    <!-- 勋章信息 -->
    <div class="medalMsg">
      <div class="medalImg">
        <img :src="medalUrl" alt="" style="border-radius: 50%" />
        <div>{{ medalName }}</div>
      </div>
      <div class="medalText">
        <div>拥有人数：{{ num }}</div>
        <div>简介：{{ content }}</div>
      </div>
    </div>
    <!-- 搜索项 -->
    <div class="search_bar">
      <el-form size="small" :inline="true" label-width="68px">
        <el-form-item label="员工姓名">
          <el-input
            v-input-restrict
            v-model="sea_form.nickName"
            placeholder="请输入员工姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="账号">
          <el-input
            v-input-restrict
            v-model="sea_form.phoneNumber"
            placeholder="请输入员工账号"
            clearable
          />
        </el-form-item>
        <el-form-item label="门店" prop="schoolId">
          <el-select
            v-model="sea_form.schoolId"
            placeholder="全部"
            filterable
            style="width: 200px"
          >
            <el-option label="全部" :value="''" />
            <el-option
              v-for="dict in shopOptions"
              :key="dict.schoolId"
              :label="dict.schoolName"
              :value="dict.schoolId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位" prop="postIds">
          <el-select
            v-model="sea_form.postId"
            placeholder="全部"
            filterable
            style="width: 200px"
          >
            <el-option label="全部" :value="''" />
            <el-option
              v-for="dict in postOptions"
              :key="dict.postId"
              :label="dict.postName"
              :value="dict.postId"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="search_btns">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getdataBysearch"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 获得勋章员工列表 -->
    <el-table v-loading="loading" :data="staffList">
      <el-table-column
        show-overflow-tooltip
        label="姓名"
        align="center"
        width="380"
        min-width="200"
      >
        <template slot-scope="scope">
          <div class="mainbox">
            <div class="staffName">
              <el-avatar
                :src="
                  scope.row.avatar
                    ? scope.row.avatar
                    : require('@/assets/images/head_img.png')
                "
              ></el-avatar>
              <div class="workName">
                <div>{{ scope.row.nickName }}</div>
                <div class="staffSex">
                  {{ scope.row.sex == 0 ? "男" : "女" }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="账号"
        align="center"
        prop="phoneNumber"
      />
      <el-table-column
        show-overflow-tooltip
        label="大区"
        align="center"
        prop="regionName"
      />
      <el-table-column
        show-overflow-tooltip
        label="门店"
        align="center"
        prop="schoolName"
      />
      <el-table-column
        show-overflow-tooltip
        label="岗位"
        align="center"
        prop="postName"
      />
      <el-table-column
        show-overflow-tooltip
        label="发放时间"
        align="center"
        prop="createTime"
      />
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="sea_form.pageNum"
      :limit.sync="sea_form.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getMedalStaffList } from "@/api/medal/medal";
import { listPost_school } from "@/api/school/list";
import { listPost } from "@/api/system/post";
export default {
  name: "ZyAdminMedalDtail",

  data() {
    return {
      medalId: "",
      medalName: "",
      medalUrl: "",
      num: "",
      content: "",
      // 遮罩
      loading: false,
      // 总条数
      total: 3,
      // 搜索条件
      sea_form: {
        pageNum: 1,
        pageSize: 10,
        nickName: "",
        schoolId: "",
        postId: "",
        phoneNumber: "",
      },
      // 门店选项
      shopOptions: [],
      // 岗位选项
      postOptions: [],

      // 员工列表
      staffList: [],
    };
  },

  created() {},
  mounted() {
    this.medalId = this.$route.query.medalId;
    this.medalName = this.$route.query.medalName;
    this.medalUrl = this.$route.query.medalUrl;
    this.num = this.$route.query.num;
    this.content = this.$route.query.content;
    // 获取勋章相关员工信息
    this.getList();
    // 获取岗位列表
    this.getPostList();
    // 获取门店列表
    this.getshopList();
  },

  methods: {
    // 搜索
    getdataBysearch() {
      this.sea_form.pageNum = 1;
      // 发送获取信息请求
      this.getList();
    },
    // 重置
    resetSearch() {
      this.sea_form = {
        pageNum: 1,
        pageSize: 10,
        nickName: "",
        schoolId: "",
        postId: "",
        phoneNumber: "",
      };
      this.getdataBysearch();
    },
    // 获取员工数据
    async getList() {
      // 发送获取数据请求
      this.loading = true;
      let res = await getMedalStaffList(
        this.medalId,
        this.sea_form.pageNum,
        this.sea_form.pageSize,
        this.sea_form.nickName,
        this.sea_form.schoolId,
        this.sea_form.postId,
        this.sea_form.phoneNumber
      );
      console.log(res, "5d5d5d5d5d");
      const { code, rows, total } = res;
      if (code == 200) {
        this.loading = false;
        this.staffList = rows;
        this.total = total;
      } else {
        this.loading = false;
      }
    },
    /* 获取门店列表 */
    getshopList() {
      listPost_school({
        pageNum: 1,
        pageSize: 9999,
      }).then((res) => {
        this.shopOptions = res.rows;
      });
    },
    /* 获取岗位 */
    getPostList() {
      listPost({
        pageNum: 1,
        pageSize: 9999,
      }).then((response) => {
        this.postOptions = response.rows;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contrainer {
  padding: 20px;
}
.search_bar {
  padding: 20px 20px 0px 20px;
  background-color: #fafafa;
  margin: 20px 0px;
  .search_btns {
    float: right;
  }
}
.medalMsg {
  display: flex;
  .medalImg {
    margin-right: 40px;
    text-align: center;
    img {
      height: 50px;
      width: 50px;
    }
  }
  .medalText {
    height: 100%;
    line-height: 40px;
  }
}
.staffName {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: left;
  .workName {
    margin-left: 20px;
    text-align: left;
    // float: left;
    .staffSex {
      font-size: 12px;
      text-align: left;
      font-weight: normal;
      color: #7e7d7d;
    }
  }
}
.mainbox {
  width: 380px;
  display: flex;
  justify-content: center;
}
</style>